<template>
    <div>
        <a-card>
            <!-- 搜索栏 -->
            <!-- 使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔 -->
            <a-row :gutter=20>
                <a-col :span="6">
                  <!-- v-model是vue.js中内置的双向数据绑定指令
                  v-model="queryParam.username" 绑定搜索列的名称；
                  @search="getUserList"绑定搜索方法;
                  allowClear 可以点击清除图标删除内容 -->
                    <a-input-search v-model="queryParam.username"
                     placeholder="请输入用户名查找"
                     enter-button
                     allowClear
                     @search="getUserList" />
                </a-col>
                <a-col :span="6">
                  <!-- @click="showModal"  绑定对话框是否可见 -->
                    <a-button type="primary" icon="plus-circle" @click="showModal"> 新增</a-button>
                </a-col>
            </a-row>
            <!-- 数据表格 -->
            <!-- :columns="columns" 表格列的配置描述 ;
             :data-source="userList" 绑定数据
            rowKey 表格行 key 的取值，可以是字符串或一个函数-->
            <a-table
             bordered
             :pagination="pagination"
             @change="handleTableChange"
             :columns="columns"
             :data-source="userList"
             rowKey="ID">
             <!--
              slot="role" slot-scope= 插槽 绑定，以下三种判断写法 三目运算 或者使用过滤器 判断;
             当遇到多个数据判断时就可以通过三目运算的嵌套来达到目的
              -->
            <!-- <span slot="role" slot-scope="data">{{data == 1 ? '管理员':'订阅者'}}</span> -->
            <a-tag :color="{1: 'red', 2: 'green'}[data]" slot="role" slot-scope="data">
              {{data == 2 ? '订阅者' : (data ==1 ?'管理员': '普通用户')}}
            </a-tag>
            <!-- <a-tag :color="data | fmtRoleColor" slot="role" slot-scope="data">
              {{data | fmtRole}}
            </a-tag> -->
            <!-- 操作列 ；
            slot="action" 绑定columns对应列的key
            slot-scope="data" 带数据的插槽
            @click="deleteUser(data.ID) 绑定删除事件
            -->
            <template slot="action" slot-scope="data">
                <div>
                    <a-button
                    type="primary"
                    icon="edit"
                    style="margin-right:15px"
                    @click="editUser(data.ID)"
                    >编辑</a-button>
                    <a-button
                    type="danger"
                    icon="delete"
                    style="margin-right:15px"
                    @click="deleteUser(data.ID)"
                    >删除</a-button>
                </div>
            </template>
            </a-table>
        </a-card>

        <!-- 新增用户  Modal 对话框-->
        <!-- closable:是否显示右上角的关闭按钮;-->
   <!-- 通过 rules 属性传入约定的验证规则，并将 FormItem 的 prop 属性设置为需校验的字段名即可;
          ref 引用对象：除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法 -->
      <a-modal
        title="新增用户"
        closable
        :visible="visible"
        @ok="addUserHandleOk"
        @cancel="addUserHandleCancel">
        <!-- :model相当于v-bind:model的缩写，
        v-bind动态绑定指令，默认情况下标签自带属性的值是固定的
        rules="addUserRules 传入约定的验证规则, 使用 prop 引用
        ref="userRef" 引用对象-->
        <a-form-model :model="newUser" :rules="addUserRules" ref="userRef">
          <a-form-model-item label="用户名" prop="username">
            <!-- v-model="newUser.username" 数据绑定 -->
            <a-input v-model="newUser.username"></a-input>
          </a-form-model-item>
          <a-form-model-item label="密码" prop="password">
            <a-input-password has-feedback v-model="newUser.password"></a-input-password>
          </a-form-model-item>
          <a-form-model-item label="确认密码" prop="checkpass">
            <a-input-password has-feedback v-model="newUser.checkpass"></a-input-password>
          </a-form-model-item>

        </a-form-model>
      </a-modal>

      <!-- 编辑用户 -->
      <a-modal
        title="编辑用户"
        closable
        :visible="eidtVisible"
        @ok="editUserHandleOk"
        @cancel="editUserHandleCancel">
        <!-- :model相当于v-bind:model的缩写，
        v-bind动态绑定指令，默认情况下标签自带属性的值是固定的
        rules="editUserRules 传入约定的验证规则, 使用 prop 引用
        ref="userRef" 引用对象-->
        <a-form-model :model="userInfo" :rules="editUserRules" ref="userRef">
          <a-form-model-item label="用户名" prop="username">
            <!-- v-model="userInfo.username" 数据绑定 -->
            <a-input v-model="userInfo.username"></a-input>
          </a-form-model-item>
          <a-form-model-item label="是否为管理员" prop="password">
            <a-switch checked-children="是" un-checked-children="否" @change="adminChange" />
          </a-form-model-item>

        </a-form-model>
      </a-modal>
    </div>
</template>

<script>
// 表格列的配置描述
const columns = [
  {
    title: 'ID',
    dataIndex: 'ID',
    width: '10%',
    key: 'id',
    align: 'center'
  },
  {
    title: '用户名',
    dataIndex: 'username',
    width: '10%',
    key: 'username',
    align: 'center'
  },
  {
    title: '角色',
    dataIndex: 'role',
    width: '10%',
    key: 'role',
    align: 'center',
    scopedSlots: { customRender: 'role' }
  },
  {
    title: '操作',
    width: '25%',
    key: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }

  }
]

// 表格列的配置，相同字段可以使用for循环提添加
// 将每个列添加个 居中熟悉
columns.forEach((r) => {
  r.align = 'center'
})

export default {
  // 创建过滤器转换
  filters: {
    fmtRole (val) {
      // console.log(val)
      switch (val) {
        case 1:
          return '管理员'
        case 2:
          return '普通用户'
        default:
          return val
      }
    },
    fmtRoleColor (data) {
      console.log(data)
      switch (data) {
        case 1:
          return 'blue'
        case 2:
          return 'green'
        default:
          return 'orange'
      }
    }
  },
  data () {
    return {
      // 返回一个用户列表
      userList: [],
      // 绑定用户信息
      userInfo: {
        username: '',
        password: '',
        role: 2,
        checkpass: ''
      },
      newUser: {
        username: '',
        password: '',
        role: 2,
        checkpass: ''
      },
      // 表格列的配置
      columns,
      // 分页设置，hideOnSinglePage 数据只有一页时隐藏分页
      pagination: {
        pageSizeOptions: ['5', '10', '20'],
        pageSize: 5,
        total: 0,
        showSizeChanger: true,
        hideOnSinglePage: true,
        showTotal: (total) => `共${total}条`
      },
      queryParam: {
        // 默认不查询，显示所有
        username: '',
        // 每页5 条，当前页
        pageSize: 5,
        pageNum: 1
      },
      // 模态对话框 默认false 关闭
      visible: false,
      eidtVisible: false,
      // 添加用户表单规则
      addUserRules: {
        username: [
          {
            validator: (rule, value, callback) => {
              if (this.newUser.username === '') {
                callback(new Error('请输入用户名'))
              }
              if ([...this.newUser.username].length < 4 || [...this.newUser.username].length > 10) {
                callback(new Error('用户名应当在4到10个字符之间'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        password: [
          {
            validator: (rule, value, callback) => {
              if (this.newUser.password === '') {
                callback(new Error('请输入密码'))
              }
              if ([...this.newUser.password].length < 4 || [...this.newUser.password].length > 10) {
                callback(new Error('密码应当在4到10位之间'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        checkpass: [
          {
            validator: (rule, value, callback) => {
              if (this.newUser.checkpass === '') {
                callback(new Error('请输入密码'))
              }
              if (this.newUser.password !== this.newUser.checkpass) {
                callback(new Error('密码不一致，请重新输入'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      // 编辑用户表单规则
      editUserRules: {
        username: [
          {
            validator: (rule, value, callback) => {
              if (this.userInfo.username === '') {
                callback(new Error('请输入用户名'))
              }
              if ([...this.userInfo.username].length < 4 || [...this.userInfo.username].length > 10) {
                callback(new Error('用户名应当在4到10个字符之间'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  // 生命周期函数,页面渲染
  created () {
    this.getUserList()
  },
  methods: {
    //  模态对话框开启
    showModal () {
      this.visible = true
    },
    // 获取后端数据列表
    async getUserList () {
      const { data: res } = await this.$http.get('users', {
        params: {
          username: this.queryParam.username,
          pagesize: this.queryParam.pageSize,
          pagenum: this.queryParam.pageNum
        }
      })
      console.log(res.data)
      if (res.status !== 200) return this.$message.error(res.message)
      this.userList = res.data
      this.pagination.total = res.total
    },
    // 更改分页
    handleTableChange (pagination, filters, sorter) {
      var pager = { ...this.pagination }
      pager.current = pagination.current
      pager.pageSize = pagination.pageSize
      this.queryParam.pageSize = pagination.pageSize
      this.queryParam.pageNum = pagination.current

      if (pagination.pageSize !== this.pagination.pageSize) {
        this.queryParam.pageNum = 1
        pager.current = 1
      }
      this.pagination = pager
      this.getUserList()
    },
    // 删除用户操作
    deleteUser (id) {
      this.$confirm({
        title: '提示：用户删除',
        content: '确定删除该用户么，删除无法恢复',
        onOk: async () => {
          const res = await this.$http.delete(`user/${id}`)
          if (res.status !== 200) return this.$message.error(res.message)
          this.$message.success('删除成功')
          this.getUserList()
        },
        onCancel: () => {
          this.$message.info('已取消删除')
        }
      })
    },
    // 确认添加用户
    addUserHandleOk () {
      this.$refs.userRef.validate(async (valid) => {
        if (!valid) return this.$message.error('表单填写错误')
        const { data: res } = await this.$http.post('user/add', {
          username: this.newUser.username,
          password: this.newUser.password,
          role: this.newUser.role
        })
        if (res.status !== 200) return this.$message.error(res.message)
        this.$refs.userRef.resetFields()
        this.visible = false
        this.$message.success('添加用户成功')
        this.getUserList()
      })
    },
    // 取消添加用户
    addUserHandleCancel () {
      console.log('Clicked cancel button')
      // 关闭窗口清空表单
      this.$refs.userRef.resetFields()
      //  模态对话框关闭
      this.visible = false
      this.$message.info('新增用户操作已取消')
    },
    // 编辑用户
    async editUser (id) {
      this.eidtVisible = true
      const { data: res } = await this.$http.get(`user/${id}`)
      this.userInfo = res.data
      this.userInfo.id = id
    },
    // 确认编辑用户
    editUserHandleOk () {
      this.$refs.userRef.validate(async (valid) => {
        if (!valid) return this.$message.error('参数不符合规则')
        const { data: res } = await this.$http.put(`user/${this.userInfo.id}`, {
          username: this.userInfo.username,
          role: this.userInfo.role
        })
        if (res.status !== 200) return this.$message.error(res.message)
        this.eidtVisible = false
        this.$message.success('更新信息成功')
        this.getUserList()
      })
    },
    // 取消编辑用户
    editUserHandleCancel () {
      console.log('Clicked cancel button')
      // 关闭窗口清空表单
      this.$refs.userRef.resetFields()
      //  模态对话框关闭
      this.eidtVisible = false
      this.$message.info('编辑用户操作已取消')
    },
    // 是否为管理员的开关事件
    adminChange (checked) {
      if (checked) {
        this.userInfo.role = 1
      } else {
        this.userInfo.role = 2
      }
    }
  }
}
</script>

<style scoped>
.actionSlot {
  display: flex;
  justify-content: center;
}
</style>
